<template>
	<view>
		<!-- 搜索 bar -->
		<yg-searchbar @searchClick="searchClickAction"></yg-searchbar>
		<!--  分类 -->
		<view class="scrollContainer">
			<!--  左边分类 -->
			<scroll-view class="scroll__left" scroll-y="true" :style="{height  : scrollHeight + 'px'}">
				<view class="left__item" v-for="(item,index) in cateDataList" @tap="itemClickAction(index)">
					<view class="item" :class="index  == selectedLeftMenuIndex ? 'action' : ''"> {{item.cat_name}} </view>
					<view class="redLine" v-if="index  == selectedLeftMenuIndex"></view>
					<view class="garyLine" v-if="index  != selectedLeftMenuIndex  &&  (index !=  cateDataList.length - 1) ">
					</view>
				</view>
			</scroll-view>
			<!-- 右边具体数据 -->
			<scroll-view class="scroll__right" scroll-y="true" :style="{height  : scrollHeight + 'px'}"
				:scroll-top="scrollTop">
				<view class="listView" v-for="(item,index) in currentGoodsList" :key="item.id">
					<view class="listView__title">{{ item.cat_name }}</view>
					<view class="listView__list">
						<view class="list__item" v-for="(itm,idx) in item.children" @tap="goodsItemClick(itm)" >
							<image class="item__icon" :src="itm.cat_icon" mode="scaleToFill"></image>
							<view class="item__title">{{itm.cat_name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0, // 窗口高度的高度
				scrollHeight: 0, // 滑动控价的高度 
				selectedLeftMenuIndex: 0, // 当前选中的分类的索引
				cateDataList: [1, 2, 3], // 分类数据
				scrollTop: 0, // 滚动条距离顶部的距离
			}
		},

		computed: {

			// 当前分类下的商品
			currentGoodsList() {
				return this.cateDataList[this.selectedLeftMenuIndex].children || []
			}
		},

		onReady() {
			const that = this
			uni.getSystemInfo({
				success: (res) => {
					// 可使用窗口高度
					that.windowHeight = res.windowHeight
					//  获取控件距顶部的距离()
					uni.createSelectorQuery().select('.scroll__left').boundingClientRect(data => {
						let windowH = that.windowHeight
						//  获取剩余高度 =  可用窗口高度 - 控件距顶部的高度
						that.scrollHeight = windowH - data.top
						console.log('-- 计算出控件的高度:', that.scrollHeight);
					}).exec()
				}
			})
		},

		onLoad() {
			this.getCateDataList()
		},
		methods: {

			// 分类点击事件
			itemClickAction(index) {
				this.selectedLeftMenuIndex = index
				// 滚动到指定位置(只有当数字切换的时候才会生效,故 使其复制 0 或 1 进行却换)
				this.scrollTop = this.scrollTop == 0 ? 1 : 0

			},

			//  获取分类数据列表
			getCateDataList() {

				this.$reqGet('/api/public/v1/categories').then(res => {
					let code = res.statusCode
					if (code == 200) {
						this.cateDataList = res.data.message
					}
				})
			},

			//  跳转到搜索页面
			searchClickAction() {
				uni.navigateTo({
					url: '/pages/search/search' 
				});
			},
			
			// 商品点击事件跳转到商品列表
			goodsItemClick(item) {
				let cid = item.cat_id
				uni.navigateTo({
					url:'/pages/goods_list/goods_list' + '?cid=' + cid
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		// background-color: $uni-color-background;
	}

	.scrollContainer {
		display: flex;

		.scroll__left {
			background-color: #F6F6F6;
			width: 120px;

			.left__item {
				position: relative;

				.item {
					// padding: 30rpx 0;

					height: 100rpx;
					line-height: 100rpx;

					text-align: center;
					font-size: 24rpx;
					color: #999;

					&.action {
						// border-bottom: 1rpx solid orange;
						background: #fff;
						color: #333;
					}
				}

				.redLine {
					background-color: $uni-color-theme;
					width: 3px;
					height: 50rpx;
					border-radius: 10rpx;

					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				.garyLine {
					width: 100rpx;
					height: 2rpx;
					background-color: #E3E4E7;

					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.scroll__right {
			display: flex;
			flex-direction: column;
			padding: 0rpx 20rpx;
			//background: pink;

			.listView {

				.listView__title {
					padding: 10rpx 0;
					text-align: center;
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
				}

				.listView__list {

					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.list__item {

						//background: orange;
						width: calc((100% - 10px)/3);
						margin: 0 5px 5px 0;
						border-radius: 10rpx;

						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;


						&:nth-child(3n) {
							margin-right: 0;
						}

						.item__icon {
							width: 120rpx;
							height: 120rpx;
							padding: 10rpx;
						}

						.item__title {
							padding: 0 0 10rpx;
							font-size: 24rpx;
							padding: 10;
						}
					}
				}
			}
		}
	}
</style>